<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style type="text/css">
		html, body {
		  height:100%; overflow:hidden;
		}
		iframe {
			border:0;top:0px;left:0;width:100%;height:100%;
		}
	</style>
	<script type="text/javascript">
		var editor = 'https://test.draw.io/?dev=1&drawdev=1&embed=1&spin=1&ui=atlas&proto=json&libraries=1&configure=1';
		var temp = null;
		
		function edit(image)
		{
			console.log('edit', image);
			
			var filetype = document.getElementById('filetype');
			var toolbar = document.getElementById('toolbar');
			var status = document.getElementById('status');
			var format = document.getElementById('format');
			var iframe = document.createElement('iframe');
			iframe.setAttribute('frameborder', '0');

			var close = function()
			{
				window.removeEventListener('message', receive);
				iframe.parentNode.parentNode.removeChild(iframe.parentNode);
				toolbar.style.display = 'none';
				image.style.display = '';
			};
			
			var receive = function(evt)
			{
				if (evt.data.length > 0)
				{
					var msg = null;
					
					try
					{
						msg = JSON.parse(evt.data);
						console.log('msg', msg);
					}
					catch (e)
					{
						// ignore
					}
				
					if (msg == null)
					{
						// Ignore
						return;
					}
					else if (msg.event == 'configure')
					{
						// Configuration example
						iframe.contentWindow.postMessage(JSON.stringify({action: 'configure',
							config: {customFonts: ["Waltograph"],
								fontCss: "@font-face { font-family: 'Waltograph'; src:  url(https://fontlibrary.org/assets/fonts/waltograph/23a40698cd1bb84f930b7a0884c134a6/ab260a56f2b852b78f81eac337e0a2fc/WaltographRegular.otf) format('opentype')}"
							}}), '*');
					}
					else if (msg.event == 'init')
					{
						// Shows template dialog in editor
// 						iframe.contentWindow.postMessage(JSON.stringify({action: 'template',
// 							autosave: 1}), '*');
						
						var data = image.getAttribute('src');
						
						iframe.contentWindow.postMessage(JSON.stringify({action: 'load', autosave: 1,
							saveAndExit: '1', modified: 'unsavedChanges', xml: data, title: 'Title'}), '*');
						
// 						iframe.contentWindow.postMessage(JSON.stringify({action: 'draft',
// 							xml: data, name: 'Optional Title'}), '*');
						
						filetype.style.display = '';
						status.style.display = 'none';
					}
					else if (msg.event == 'autosave')
					{
						temp = msg.xml;
					}
					else if (msg.event == 'export')
					{
						console.log('data', msg.data);
						
						if (format.value != 'html' && format.value != 'html2')
						{
							image.setAttribute('src', msg.data);
						}
						
						close();
					}
					else if (msg.event == 'save')
					{
						temp = msg.xml;
						
						localStorage.setItem('embedFile', temp);
						
						if (msg.exit)
						{
							msg.event = 'exit';
						}
						else
						{
							iframe.contentWindow.postMessage(JSON.stringify({action: 'status',
								messageKey: 'allChangesSaved', modified: false}), '*');
// 							iframe.contentWindow.postMessage(JSON.stringify({action: 'spinner',
// 								messageKey: 'saving'}), '*');
// 							window.setTimeout(function()
// 							{
// 								iframe.contentWindow.postMessage(JSON.stringify({action: 'spinner', show: false}), '*');
// 							}, 1500);
							
	// 						iframe.contentWindow.postMessage(JSON.stringify({action: 'dialog',
	// 							titleKey: 'error', messageKey: 'fileNotFound',
	// 							buttonKey: 'close'}), '*');
						}
					}
					
					if (msg.event == 'exit')
					{
						if (format.value == 'xml')
						{
							console.log('data', temp);
							close();
						}
						else if (temp != null && !msg.modified)
						{
							iframe.contentWindow.postMessage(JSON.stringify({action: 'export',
								format: format.value, xml: temp, spinKey: 'export'}), '*');
							temp = null;
						}
						else
						{
							close();
						}
					}
				}
			};
			
			window.addEventListener('storage', function(evt)
			{
				console.log('evt', evt, evt.newValue);
				
				if (evt.key == 'embedFile')
				{
					iframe.contentWindow.postMessage(JSON.stringify(
						{action: 'merge', xml: evt.newValue}), '*');
				}
			});

			window.addEventListener('message', receive);
			iframe.setAttribute('src', editor);
			var wrapper = document.createElement('div');
			wrapper.style.cssText = 'position:absolute;top:20px;bottom:0px;left:0px;right:0px;';
			wrapper.appendChild(iframe);
			document.body.appendChild(wrapper);
			filetype.style.display = 'none';
			image.style.display = 'none';
			toolbar.style.display = '';
			status.style.display = '';
		};
	</script>
</head>
<body>
<div id="toolbar" style="position:absolute;top:0px;right:0px;height:20px;display:none;"><span id="status">Loading...</span>
<span id="filetype">Filetype:&nbsp;
<select id="format">
  <option value="xmlpng">PNG+XML</option>
  <option value="png">PNG (not editable)</option>
  <option value="xmlsvg">SVG+XML</option>
  <option value="svg">SVG (not editable)</option>
  <option value="xml">XML</option>
  <option value="html">HTML</option>
  <option value="html2">HTML2</option>
</select>
</span>
</div>
<img id="image" style="cursor:pointer;" title="Click to edit image" onclick="edit(this);" src=""/>
</body>
</html>
